<template>
  <div>
   <el-card>
        <div class="search_box">
      <el-form :model="searchForm" label-width="80px" size="small">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="省市区县">
              <el-input
                v-model="searchForm.address"
                clearable
                @clear="handleSearch"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人">
              <el-input
                v-model="searchForm.contact"
                clearable
                @clear="handleSearch"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="具体地点">
              <el-input
                v-model="searchForm.name"
                clearable
                @clear="handleSearch"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            >
            <el-button type="success" icon="el-icon-plus" @click="handleAdd" v-permission="'supplier:add'"
              >添加</el-button
            >
            <el-button icon="el-icon-refresh" @click="handleReset"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="consumerList" border stripe size="mini">
        <el-table-column align="center" prop="id" label="#"> </el-table-column>
        <el-table-column align="center" prop="phone" label="省">
          <template slot-scope="scope">
            <span v-text="scope.row.address.split('/')[0]"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phone" label="市">
          <template slot-scope="scope">
            <span v-text="scope.row.address.split('/')[1]"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phone" label="县">
          <template slot-scope="scope">
            <span v-text="scope.row.address.split('/')[2]"></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          show-overflow-tooltip
          prop="address"
          label="地址"
        >
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column align="center" prop="contact" label="联系人">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="电话">
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="操作">
          <template scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)" v-permission="'supplier:edit'"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row.id)" v-permission="'supplier:delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pageTools
      :total="total"
      :paginationPage="searchForm.pageNum"
      :paginationPagesize="searchForm.pageSize"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
    ></pageTools>
    <el-dialog
      :title="isEdit?'编辑物资去处':'添加物资去处'"
      :visible.sync="dialogVisible"
      @close="closeFn"
    >
      <el-form
        v-if="dialogVisible"
        ref="addfrom"
        label-width="100px"
        :rules="addRules"
        :model="addfrom"
      >
        <el-form-item label="地址">
          <city v-if="!isEdit" @getValue="getCity"></city>
          <el-input v-else disabled v-model="addfrom.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="addfrom.contact"></el-input>
        </el-form-item>
        <el-form-item label="详细去处" prop="name">
          <el-input type="textarea" v-model="addfrom.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addfrom.phone"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            :min="0"
            :max="10"
            v-model="addfrom.sort"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSumbit">确 定</el-button>
      </span>
    </el-dialog>
   </el-card>
  </div>
</template>

<script>
import { list, add, update, deleteFn } from '../../../api/suppliers'
export default {
  data () {
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[34578]\d{9}$$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      searchForm: {
        address: '',
        contact: '',
        name: '',
        pageNum: 1,
        pageSize: 5
      },
      consumerList: [],
      total: 0,
      dialogVisible: false,
      addfrom: {
        address: '',
        contact: '', // 联系人
        name: '',
        phone: '',
        sort: '',
        valueProvince: '',
        valueCity: '',
        valueOrigin: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入物资去处名称', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }
        ],
        sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [
          {
            required: true,
            message: '请输入联系方式',
            validator: checkPhone,
            trigger: 'blur'
          }
        ]
      },
      editId: null,
      isEdit: false
    }
  },
  created () {
    this.getConsumerList()
  },
  methods: {
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteFn(id)
          if (!res.success) return this.$notify.error(res.data.errorMsg)
          this.getConsumerList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleEdit (row) {
      this.isEdit = true
      this.editId = row.id
      this.addfrom = row
      this.dialogVisible = true
    },
    handleSumbit () {
      this.$refs.addfrom.validate((valid) => {
        if (!valid) return
        this.isEdit ? this.onEdit() : this.onAdd()
      })
    },
    closeFn () {
      this.dialogVisible = false
    },
    async onEdit () {
      const res = await update(this.addfrom, this.editId)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('编辑成功')
      this.getConsumerList()
      this.dialogVisible = false
    },
    async onAdd () {
      if (this.addfrom.address === '') return this.$notify.error('请选择地址')
      const res = await add(this.addfrom)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('新增成功')
      this.getConsumerList()
      this.dialogVisible = false
    },
    getCity (val) {
      //   console.log(val)
      this.addfrom.address = val.address
      this.addfrom.valueProvince = val.checkList[0]
      this.addfrom.valueCity = val.checkList[1]
      this.addfrom.valueOrigin = val.checkList[2]
    },
    handleAdd () {
      this.isEdit = false
      this.dialogVisible = true
    },
    handleSearch () {
      this.searchForm.pageNum = 1
      this.getConsumerList()
    },
    async getConsumerList () {
      const res = await list(this.searchForm)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.consumerList = res.data.rows
      this.total = res.data.total
    },
    pageChange (val) {
      this.searchForm.pageNum = val
      this.getConsumerList()
    },
    pageSizeChange (val) {
      this.searchForm.pageSize = val
      this.getConsumerList()
    },
    handleReset () {
      this.searchForm = {
        address: '',
        contact: '',
        name: '',
        pageNum: 1,
        pageSize: 5
      }
      this.handleSearch()
    }
  }
}
</script>

<style>
</style>
